<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .red {
                background-color: red;
            }

            .blue {
                background-color: blue;
            }

            .black {
                background-color: black;
            }

            .border {
                border: 10px solid blue;
            }

            div {
                width: 200px;
                height: 200px;
            }

            .a {
                 border-radius: 50%;
            }

            #wrap {
                width: 300px;
                height: 300px;
                border: 5px solid black;
            }

            .orange {
                background: orange;
            }

        </style>
    </head>
    <body>

        <ul>
            <li class="red" a="5">1</li>
            <li class="blue" a="6">2</li>
            <li class="black" a="7">3</li>
            <li>4</li>
        </ul>

        <input type="radio" checked>

        <div class="red"></div>
        <div></div>
        <div></div>
        <div></div>

        <div id="wrap" class="orange"></div>

        <p><a href="">呵呵</a></p>
        <p><a href="">哈哈</a></p>
        <p><a href="">嘿嘿</a></p>

        <input type="text">
        <input type="text">

        <input type="checkbox" value="check1"/> check1
        <input type="checkbox" value="check2"/> check2
        <input type="radio" value="radio1"/> radio1
        <input type="radio" value="radio2"/> radio2

    </body>
</html>
<script src="lib/jquery.min.js"></script>
<script>
    // 返回的所有匹配元素中第一个元素的属性值
//    console.log($('li').attr("a"));
    // 设置属性a的值
//    $('li').attr("a", "9");
//    $('li').attr("class", "red");

    var arr = ["blue", "red", "black"];
//    $('li').attr("a", function (index, value) {
//        console.log(index, value);
//        return Number(value) + 1;
////        return arr[index];
//    });

//    $('li').attr({
//        a: "100",
//        class: "red"
//    });

    $("li").attr({

        a: function (index, value) {
            return Number(value) + 1;
        },
        class: function (index, value) {
            return arr[index];
        }


    });

//    $('input').prop("checked", false);
//    $('input').attr("checked", true);

//    $('input').prop("checked", true);

    // prop 也是设置元素的属性, 操作自己定属性无效
    // prop 一般用来获取或者设置元素的自带属性
    // attr 一般用来操作自定义属性
    // 注意: 在操作bool属性时(比如: checked, selected, disabled等)属性时一定要使用prop
//    $('li').prop("a", "10");

    // 移除属性
//    $('li').removeAttr('class');
    // $('li').removeProp("a");

    // 添加类名
//    $('div').addClass("border a");

    // addClass(class|fn) 添加类名
    $('div').addClass(function (index, oldValue) {
        // 回调的第一个参数是下标, 第二个参数: 旧值
//        console.log(index, oldValue);
        return "item-" + index;
    });

    // removeClass([class|fn]) 移除类值
//    $('div').removeClass("red");
    // 移除所有的class的值
//    $('div').removeClass();


    // 如果存在（不存在）就删除（添加）一个类。
//    $('#wrap').click(function (e) {
////        $(this).toggleClass("orange", false);
//        $(this).toggleClass(function (index, c) {
//            console.log(index, c);
//            return "waige";
//        });
//    });

    $(document).click(function () {
       $('li').toggleClass(function (index, c) {
           if (index % 2 == 0) {
               return "waige";
           } else {
               return "shuaige";
           }
       })
    });

    // html([val|fn]) 设置或者获取元素的html内容
    // 获取匹配的元素集合中第一个元素的html内容
//    console.log($('p').html());

//    $('p').html("你好吗");

    $('p').html(function (index, oldValue) {
        console.log(index, oldValue);
        return oldValue + ", 你好吗?";
    });

    // text([val|fn])
    // 用法同上, 只不过该方法只操作文本内容
//    console.log($('p').text());
//    $('p').text("nihao");

    // 针对input和下拉框(select option)
//    $('input').val("呵呵");
//    $("input").val(["呵呵", "哈哈"]);
    // $("input").val(["check2", "radio2"]);
</script>